<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts.min.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts-gl/echarts-gl.min.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts-stat/ecStat.min.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/extension/dataTool.min.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/china.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/world.js"></script>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=ZUONbpqGBsYGXNIYHicvbAbM"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/extension/bmap.min.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/simplex.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/simplex.js"></script>


<title>DIV+CSS布局多行多列</title>
<style type="text/css">


body {
font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; line-height: 20px; background: #aaaaaa;
}

.nav{
clear:both; margin-right:auto; margin-left:auto; width:90%; height:25px; line-height:25px; background:#aaaaaa;
}
.left3{
/*用在五列布局上*/
border-right:1px solid #FFF; width:20%; background:#FFF; float:left;height:35%;margin-left:1%;
}
.left1{
/*用在五列布局上*/
border-right:1px solid #FFF; width:20%; background:#FFF; float:left;height:35%;margin-left:1%;margin-bottom:10px;
}

#main_box{
/*正文区大容器*/
width:90%; margin-right:auto; margin-left:auto; background:#EFEFEF;
}
</style>
</head>
<body>


<!--三列左侧-->

<!--三列结束-->
<div class="nav"></div>
<!--四列开始-->

<div class="left3" id="container"> </div>
<div class="left1" id="container2"></div>
<div class="left3" id="container3"></div>
<div class="left3" id="container4"> </div>

<!--四列结束-->
<div class="nav"></div>
<!--五列开始-->
<div class="left3" id="container5"> </div>
<div class="left1" id="container6"></div>
<div class="left3" id="container7"> </div>
<div class="left3" id="container8"> </div>

</div>
</div>
<!--尾部区-->

</div>
<!--End-->


<script type="text/javascript">


// ==================== 图1=========================//
 var dom = document.getElementById("container");



 var myChart = echarts.init(dom);
 var app = {};
 option = null;
 
 option = {
     title: {
         text: '设备统计',
         textStyle:{//标题内容的样式
                    fontStyle:'normal',//主标题文字字体风格，默认normal，有italic(斜体),oblique(斜体)
                    fontWeight:"bolder",//可选normal(正常)，bold(加粗)，bolder(加粗)，lighter(变细)，100|200|300|400|500...
                    fontFamily:"san-serif",//主题文字字体，默认微软雅黑
                    fontSize:12//主题文字字体大小，默认为18px
                },
     },
     tooltip: {
         trigger: 'item',
         formatter: "{a} <br/>{b}: {c} ({d}%)"
     },
     legend: {
         orient: 'horizontal',
         x: 'left',
         y: 'bottom',
         data:['异常设备','重点监控','离线多天','过期设备'],
         textStyle:{//标题内容的样式
                    fontStyle:'normal',//主标题文字字体风格，默认normal，有italic(斜体),oblique(斜体)
                    fontWeight:"，bold",//可选normal(正常)，bold(加粗)，bolder(加粗)，lighter(变细)，100|200|300|400|500...
                    fontSize:10//主题文字字体大小，默认为18px
                },
 formatter: function(name) {
     if(name === '异常设备') {
         return name + ":"+"2";
     } else if(name === '重点监控') {
         return name + ":"+"8";
     }else if(name === '离线多天') {
         return name + ":"+"1";
     }else if(name === '过期设备') {
         return name + ":"+"0";
     }
 },
     },
     series: [
         {
             name:'访问来源',
             type:'pie',
             
             radius: ['30%', '50%'],
             avoidLabelOverlap: false,
             label: {
                 normal: {
                     show: false,
                     position: 'center'
                 },
                 emphasis: {
                     show: false,
                     textStyle: {
                         fontSize: '30',
                         fontWeight: 'bold'
                     }
                 }
             },
             labelLine: {
                 normal: {
                     show: false
                 }
             },
             data:[
                 {value:2, name:'异常设备'},
                 {value:8, name:'重点监控'},
                 {value:1, name:'离线多天'},
                 {value:0, name:'过期设备'},
             ]
         }
     ]
 };
 ;
 if (option && typeof option === "object") {
     myChart.setOption(option, true);
 }
 window.onresize = function () {
    myChartContainer();
    myChart.resize();
};

 // ==================== 图2=========================//
 var dom = document.getElementById("container2");
 var myChart = echarts.init(dom);
 var app = {};
 option = null;
 option = {
    title: {
        text: '增量统计',
        textStyle:{//标题内容的样式
                   fontStyle:'normal',//主标题文字字体风格，默认normal，有italic(斜体),oblique(斜体)
                   fontWeight:"bolder",//可选normal(正常)，bold(加粗)，bolder(加粗)，lighter(变细)，100|200|300|400|500...
                   fontFamily:"san-serif",//主题文字字体，默认微软雅黑
                   fontSize:12//主题文字字体大小，默认为18px
               },
    },
    
   
     grid: {
         left: '3%',
         right: '4%',
         bottom: '3%',
         containLabel: true
     },
    
     xAxis: {
         type: 'category',
         boundaryGap: false,
         data: ['1天','2天','3天','4天','5天','6天','7天']
     },
     yAxis: {
         type: 'value',
         max:'10',
     },
     grid:[
                {x:'10%',y:'15%',width:'85%',height:'70%'},
                
            ],
     series: [
         {
            
             name:'',
             type:'line',
             stack: '总量',
             data:[1, 0, 1, 0, 0, 1, 1]
         }
        
     ],
     
 };
 ;
 if (option && typeof option === "object") {
     myChart.setOption(option, true);
 }
 window.onresize = function () {
    myChartContainer();
    myChart.resize();
};
//=====================  图3========================//
 var dom = document.getElementById("container3");
var myChart = echarts.init(dom);
var app = {};
option = null;
option = {
    title: {
        text: '有线离线',
        textStyle:{//标题内容的样式
                   fontStyle:'normal',//主标题文字字体风格，默认normal，有italic(斜体),oblique(斜体)
                   fontWeight:"bolder",//可选normal(正常)，bold(加粗)，bolder(加粗)，lighter(变细)，100|200|300|400|500...
                   fontFamily:"san-serif",//主题文字字体，默认微软雅黑
                   fontSize:12//主题文字字体大小，默认为18px
               },
    },
    grid:[
                {x:'10%',y:'15%',width:'85%',height:'70%'},
                
            ],
    xAxis: {
        type: 'category',
        data: ['1天','2天','3天','4天','5天','6天','7天']
    },
    yAxis: {
        type: 'value',
        max:'10',
    },
    grid:[
                {x:'10%',y:'15%',width:'85%',height:'70%'},
                
            ],
    series: [{
        data: [1, 2, 1, 0, 0, 1, 6],
        type: 'bar',
        label:{
         normal:{
             show:true,
             position:'top',
             textStyle:{
                 color:'black'
             }
         }
        },
        itemStyle: {   
                //通常情况下：
                normal:{  
　　　　　　　　　　　　//每个柱子的颜色即为colorList数组里的每一项，如果柱子数目多于colorList的长度，则柱子颜色循环使用该数组
                    color: function (params){
                        var colorList = ['rgb(31,114,122)','rgb(255,133,104)','rgb(251,215,104)','rgb(195,229,235)','rgb(211,98,216)','rgb(199,51,59)','rgb(25,46,94)'];
                        return colorList[params.dataIndex];
                    }
                },
                //鼠标悬停时：
                emphasis: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            },
    }],
    
};
;
if (option && typeof option === "object") {
    myChart.setOption(option, true);
}
//=====================  图4========================//
var dom = document.getElementById("container4");
var myChart = echarts.init(dom);
var app = {};
option = null;
option = {
    title: {
        text: '无线离线',
        textStyle:{//标题内容的样式
                   fontStyle:'normal',//主标题文字字体风格，默认normal，有italic(斜体),oblique(斜体)
                   fontWeight:"bolder",//可选normal(正常)，bold(加粗)，bolder(加粗)，lighter(变细)，100|200|300|400|500...
                   fontFamily:"san-serif",//主题文字字体，默认微软雅黑
                   fontSize:12//主题文字字体大小，默认为18px
               },
    },
    xAxis: {
        type: 'category',
        data: ['1天','2天','3天','4天','5天','6天','7天']
    },
    yAxis: {
        max:'10',
        type: 'value',
    },
    grid:[
                {x:'10%',y:'15%',width:'85%',height:'70%'},
                
            ],
    series: [{
        data: [0, 0, 3, 0, 0, 0, 5],
        type: 'bar',
        label:{
         normal:{
             show:true,
             position:'top',
             textStyle:{
                 color:'black'
             }
         }
        },
        itemStyle: {   
                //通常情况下：
                normal:{  
　　　　　　　　　　　　//每个柱子的颜色即为colorList数组里的每一项，如果柱子数目多于colorList的长度，则柱子颜色循环使用该数组
                    color: function (params){
                        var colorList = ['rgb(195,229,235)','rgb(211,98,216)','rgb(199,51,59)','rgb(25,46,94)','rgb(31,114,122)','rgb(255,133,104)','rgb(251,215,104)'];
                        return colorList[params.dataIndex];
                    }
                },
                //鼠标悬停时：
                emphasis: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            },
    }]
};
;
if (option && typeof option === "object") {
    myChart.setOption(option, true);
}
 //=====================  图5========================//
 var dom5 = document.getElementById("container5");
var myChart5 = echarts.init(dom5);
var app5 = {};
option5 = null;
option5 = {
    title: {
        text: '分布统计',
        textStyle:{//标题内容的样式
                   fontStyle:'normal',//主标题文字字体风格，默认normal，有italic(斜体),oblique(斜体)
                   fontWeight:"bolder",//可选normal(正常)，bold(加粗)，bolder(加粗)，lighter(变细)，100|200|300|400|500...
                   fontFamily:"san-serif",//主题文字字体，默认微软雅黑
                   fontSize:12//主题文字字体大小，默认为18px
               },
    },
    tooltip: {
        trigger: 'item',
        formatter: '{b}'
    },
    
    series: [
        {
            name: '中国',
            type: 'map',
            mapType: 'china',
            selectedMode : 'multiple',
            label: {
                normal: {
                    show: false
                },
                emphasis: {
                    show: false
                }
            },
            data:[
                {name:'浙江', selected:true},
                {name:'江苏', selected:true},
                {name:'安徽', selected:true},
                {name:'四川', selected:true},
            ]
        }
    ]
};;
if (option5 && typeof option5 === "object") {
    myChart5.setOption(option5, true);
}
// ==================== 图6=========================//
var dom = document.getElementById("container6");
 var myChart = echarts.init(dom);
 var app = {};
 option = null;
 option = {
     title: {
         text: '报警统计',
         textStyle:{//标题内容的样式
                    fontStyle:'normal',//主标题文字字体风格，默认normal，有italic(斜体),oblique(斜体)
                    fontWeight:"bolder",//可选normal(正常)，bold(加粗)，bolder(加粗)，lighter(变细)，100|200|300|400|500...
                    fontFamily:"san-serif",//主题文字字体，默认微软雅黑
                    fontSize:12//主题文字字体大小，默认为18px
                },
     },
     tooltip: {
         trigger: 'axis'
     },
     legend: {
         data:['邮件营销','联盟广告','视频广告','直接访问','搜索引擎']
     },
     grid: {
         left: '3%',
         right: '4%',
         bottom: '3%',
         containLabel: true
     },
     grid:[
                {x:'10%',y:'15%',width:'85%',height:'70%'},
                
            ],
     xAxis: {
         type: 'category',
         boundaryGap: false,
         data: ['1天','2天','3天','4天','5天','6天','7天']
     },
     yAxis: {
        max:'10',
         type: 'value',
     },
     series: [
         {
             name:'',
             type:'line',
             stack: '总量',
             data:[1, 2, 1, 3, 0, 1, 7]
         }
        
     ]
 };
 ;
 if (option && typeof option === "object") {
     myChart.setOption(option, true);
 }
 //=====================  图7========================//
 var dom = document.getElementById("container7");
var myChart = echarts.init(dom);
var app = {};
option = null;
option = {
    title: {
        text: '到期统计',
        textStyle:{//标题内容的样式
                   fontStyle:'normal',//主标题文字字体风格，默认normal，有italic(斜体),oblique(斜体)
                   fontWeight:"bolder",//可选normal(正常)，bold(加粗)，bolder(加粗)，lighter(变细)，100|200|300|400|500...
                   fontFamily:"san-serif",//主题文字字体，默认微软雅黑
                   fontSize:12//主题文字字体大小，默认为18px
               },
    },
    xAxis: {
        type: 'category',
        data: ['1天','2天','3天','4天','5天','6天','7天']
    },
    yAxis: {
        max:'10',
        type: 'value',
    },
    grid:[
                {x:'10%',y:'15%',width:'85%',height:'70%'},
                
            ],
    
    series: [{
        data: [1, 0, 0, 0, 0, 8, 1],
        type: 'bar',
        label:{
         normal:{
             show:true,
             position:'top',
             textStyle:{
                 color:'black'
             }
         }
        },
        itemStyle: {   
                //通常情况下：
                normal:{  
　　　　　　　　　　　　//每个柱子的颜色即为colorList数组里的每一项，如果柱子数目多于colorList的长度，则柱子颜色循环使用该数组
                    color: function (params){
                        var colorList = ['rgb(199,51,59)','rgb(25,46,94)','rgb(195,229,235)','rgb(211,98,216)','rgb(31,114,122)','rgb(255,133,104)','rgb(251,215,104)'];
                        return colorList[params.dataIndex];
                    }
                },
                //鼠标悬停时：
                emphasis: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            },
    }]
};
;
if (option && typeof option === "object") {
    myChart.setOption(option, true);
}
 
//=====================  图8========================//
var dom = document.getElementById("container8");
var myChart = echarts.init(dom);
var app = {};
option = null;
option = {
    title: {
        text: '停留统计',
        textStyle:{//标题内容的样式
                   fontStyle:'normal',//主标题文字字体风格，默认normal，有italic(斜体),oblique(斜体)
                   fontWeight:"bolder",//可选normal(正常)，bold(加粗)，bolder(加粗)，lighter(变细)，100|200|300|400|500...
                   fontFamily:"san-serif",//主题文字字体，默认微软雅黑
                   fontSize:12//主题文字字体大小，默认为18px
               },
    },
    xAxis: {
        type: 'category',
        data: ['1天','2天','3天','4天','5天','6天','7天']
    },
    yAxis: {
        max:'10',
        type: 'value'
    },
    grid:[
                {x:'10%',y:'15%',width:'85%',height:'70%'},
                
            ],
    series: [{
        data: [0, 1, 0, 7, 0, 1, 0],
        type: 'bar',
        label:{
         normal:{
             show:true,
             position:'top',
             textStyle:{
                 color:'black'
             }
         }
        },
        itemStyle: {   
                //通常情况下：
                normal:{  
　　　　　　　　　　　　//每个柱子的颜色即为colorList数组里的每一项，如果柱子数目多于colorList的长度，则柱子颜色循环使用该数组
                    color: function (params){
                        var colorList = ['rgb(199,51,59)','rgb(251,215,104)','rgb(25,46,94)','rgb(195,229,235)','rgb(255,133,104)','rgb(211,98,216)','rgb(31,114,122)'];
                        return colorList[params.dataIndex];
                    }
                },
                //鼠标悬停时：
                emphasis: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 1)'
                }
            },
    }]
};
;
if (option && typeof option === "object") {
    myChart.setOption(option, true);
}
           </script>
</body>
</html>